<html lang="fr">

<head>
	<meta charset="utf-8" />
	<title>My Farm</title>

    <link rel="stylesheet" href="CSS/players_menu.css">
    <link rel="stylesheet" href="CSS/style.css" type="text/css">
    <link rel="stylesheet" href="CSS/ui.css" type="text/css">
</head>

<body>

<!-- LOGIN FORM -->
    <div id="players_menu">
        <div id="login">
            <form action="" id="login_form">
                <input type="text" id="username" placeholder="Pseudo" /><br/>
                <input type="password" id="password" placeholder="Mot de passe" />
                <input type="submit" value="Envoyer" />
            </form>
            <a href="" id="registration_link">Or registration</a>
        </div>

        <div id="registration">
            <form action="" id="registration_form">
                <input type="text" id="username_reg" placeholder="Pseudo" /><br/>
                <input type="password" id="password_reg" placeholder="Password" />
                <input type="submit" value="Register me" />
            </form>
        </div>

        <ul id="players_list"></ul>
    </div>

<!-- GAME -->

    <!-- SCREEN -->
    <canvas id="screen" width="800" height="600">
        Your browser doesn't include support for the canvas tag.
    </canvas>

    <!-- UI -->
    <div id="ui_top">
        &nbsp
        Level : <span id="ui_top_level"></span>
        &nbsp | &nbsp
        Gold : <span id="ui_top_gold"></span>
        &nbsp | &nbsp
        Health : <span id="ui_top_health"></span> / <span id="ui_top_maxHealth"></span>
    </div>

    <div id="ui_right"><button onclick="btnClosePanelClick()">Close panel</button></div>

    <div id="ui_bottom">

        <div class="ui_buy_tab">
            <input type="radio" id="tab_crops" name="tab-group-1" checked class="ui_buy_tab_label">
            <label  for="tab_crops">Crops</label>

            <div class="ui_bottom_content">
                <ul class="ui_buy_tab_list">
                    <li>
                        <button onclick="btnCropTomatoClick()">Tomato</button>
                        <p>
                            Plant a tomato crop.
                            <br />
                            <span>100 G</span>
                        </p>
                    </li>
                    <li>
                        <button onclick="btnCropCornClick()">Corn</button>
                        <p>
                            Plant a corn crop.
                            <br />
                            <span>150 G</span>
                        </p>
                    </li>
                    <li>
                        <button onclick="btnCropWheatClick()">Wheat</button>
                        <p>
                            Plant a wheat crop.
                            <br />
                            <span>200 G</span>
                        </p>
                    </li>
                </ul>
            </div>

        </div>

        <div class="ui_buy_tab">
            <input type="radio" id="tab-2" name="tab-group-1">
            <label for="tab-2">Buildings</label>

            <div id="ui_buildings" class="ui_bottom_content">
                <ul class="ui_buy_tab_list">
                    <li>
                        <button onclick="btnBuildSiloClick()">Silo</button>
                        <p>
                            1 Tile, store 50 goods.
                            <br />
                            <span>100 G</span>
                        </p>
                    </li>
                    <li>
                        <button onclick="btnBuildBarnClick()">Barn</button>
                        <p>
                            4 Tiles, store 250 goods.
                            <br />
                            <span>400 G</span>
                        </p>
                    </li>
                    <li>
                        <button onclick="btnBuildColdStorageClick()">Cold Storage</button>
                        <p>
                            6 Tiles, store 300 goods and prevent them from withering.
                            <br />
                            <span>600 G + 5/min (power)</span>
                        </p>
                    </li>
                </ul>
            </div>
        </div>

    </div>


    <!-- IG MSG -->
    <div id="ui_gameMsg">
        <span id="msg"></span>
    </div>

    <br />

    <!--<button id="btnTest" onclick="btnGetInfoClick()">NEW PLAYER</button>-->

</body>
<script type="text/javascript" src="js/client/Utils/1.8.2.jquery.min.js"></script>

<script type="text/javascript" src="http://localhost:1337/socket.io/socket.io.js"></script>
<script type="text/javascript" src="js/client/common.js"></script>
<script type="text/javascript" src="js/client/Game/cl_events.js"></script>

<script type="text/javascript" src="js/client/Utils/astar.js"></script>
<script type="text/javascript" src="js/client/Utils/mathsFcts.js"></script>
<script type="text/javascript" src="js/client/Utils/gridFcts.js"></script>
<script type="text/javascript" src="js/client/Utils/resFcts.js"></script>
<script type="text/javascript" src="js/client/Utils/sprite.js"></script>

<script type="text/javascript" src="js/client/Classes/classTile.js"></script>
<script type="text/javascript" src="js/client/Classes/classHero.js"></script>
<script type="text/javascript" src="js/client/Classes/classBuilding.js"></script>
<script type="text/javascript" src="js/client/Classes/classCrop.js"></script>
<script type="text/javascript" src="js/client/Classes/classGhostBuilding.js"></script>

<script type="text/javascript" src="js/client/Game/ui.js"></script>
<script type="text/javascript" src="js/client/Game/game.js"></script>


<script type="text/javascript" src="js/client/Utils/events.js"></script>
<script type="text/javascript" src="js/client/Game/sv_events.js"></script>
</html>